<template>
  <div class="main">
    <div class="item7-item-t">
      <item-7 :data="{ name: 'tset', bfb: 100 }"></item-7>
    </div>
  </div>
</template>

<script>
import { Carousel as ElCarousel, CarouselItem as ElCarouselItem } from 'element-ui';
import Pie from '../views/pie.vue';
import scrollBoard from '../views/scroll-board.vue';
import Item3 from '../views/item3.vue';
import Item4 from '../views/item4.vue';
import Item5 from '../views/item5.vue';
import Item6 from '../views/item6.vue';
import Item7 from '../views/item7.vue';
import Item8 from '../views/item8.vue';
import Item9 from '../views/item9.vue';
import Item10 from '../views/item10.vue';
import Item11 from '../views/item11.vue';
import api from '../utils/api';
export default {
  components: {
    scrollBoard,
    Pie,
    Item3,
    Item4,
    Item5,
    Item6,
    Item7,
    Item8,
    Item9,
    Item10,
    Item11,
    ElCarousel,
    ElCarouselItem,
  },
  data() {
    return {
      productList: [],
    };
  },
  mounted() {},
};
</script>

<style lang="less">
.main {
  width: 604px;
  height: 260px;
  // height: 311px;
  background: #0f1b45;
  border: 1px solid #2b5cf6;
  box-sizing: content-box;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  position: relative;
  .slide {
    width: 100%;
    height: 100%;
  }
  .item-top {
    height: 36px;
    background: linear-gradient(360deg, #007fff 0%, rgba(43, 92, 246, 0) 100%);
    border-radius: 0px 0px 0px 0px;
    opacity: 0.5;
    font-size: 20px;
    color: #fff;
    position: relative;
    span {
      position: absolute;
      top: 0;
      left: 0;
      font-size: 20px;
      color: #fff;
      background-color: rgba(0, 0, 0, 0);
    }
  }
  .item-top-bg {
    position: absolute;
    top: 0;
    height: 36px;
    display: flex;
    align-items: center;
    font-size: 20px;
    color: #ffffff;
    padding-left: 15px;
    .item-bg-img {
      width: 19.5px;
      height: 9px;
      background-image: url('../assets/img/top-bg.png');
      background-size: 100%;
      margin-right: 12px;
    }
  }
  .item-conent {
    flex: 1;
    padding: 0 11px;
    display: flex;
  }
}
.item7-item-t {
  height: 100px;
}
</style>
